<template>
	<div class="wisdomStores">
		<div class="banner">
			<h1>传统行业门店模式流量引入“难”</h1>
			<p>行业痛点：费用高、质量差、浪费大量的人力物力财力、效果没保障</p>
		</div>
		<div class="container1">
			<div class="title">智慧门店解决方案</div>
			<p>传统行业门店模式流量引入难，费用高，质量差，浪费大量的人力物力财力，效果没保障。</p>
			<p>智慧门店解决方案，结合最前沿的AI技术，打造了一套包含门禁屏、云眼屏、迎宾屏、客流屏和广告屏为一体的无人店，为商家提供引流，签单，营销等综合解决方案。</p>
		</div>
		<div class="container2">
			<div class="title">人脸识别</div>
			<img src="./img/product_zhmd_content2@3x.png" alt="">
			<p>准确识别、抓取到客户的人脸信息</p>
			<p>分析出客户的年龄，性别和性格特征</p>
			<p>智能推送商品</p>
		</div>
		<div class="container3">
			<div class="title">智能管理</div>
			<div class="con">
				<div class="item"><img src="./img/product_zhmd_content3_pic1@3x.png" alt=""></div>
				<div class="item bg"><span>客户信息</span><span>留存维护</span></div>
				<div class="item bg"><span>智慧盒子</span><span>采集用户信息</span></div>
				<div class="item"><img src="./img/product_zhmd_content3_pic2@3x.png" alt=""></div>
				<div class="item"><img src="./img/product_zhmd_content3_pic3@3x.png" alt=""></div>
				<div class="item bg"><span>大数据分析</span><span>智能化管理</span></div>
			</div>
		</div>
		<div class="container4">
			<div class="title">大数据中心</div>
			<p>我们将建立全国数据中心，通过对大数据的采集、分析和共享，实现数字化、智能化的商业模式</p>
			<img src="./img/product_zhmd_content3bg@3x.png" alt="">
		</div>
	</div>
</template>

<script>
	export default {
		name: 'wisdomStores',
	}
</script>

<style lang="stylus" scoped>
	.wisdomStores{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_yonghu_banner@3x.jpg') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 62.8%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			height: 5.3rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				/*margin-top: 0.4rem;*/
				padding: 0 6%;
			}
		}
		.container2{
			width: 100%;
			height: 10.79rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: linear-gradient(0deg, #233574 0%, #0D183E 99%);
			.title{
				color: #fff;
				font-size: 0.36rem;
				margin: 0.6rem 0 0.5rem 0;
			}
			img{
				width: 6.90rem;
				height: 4.30rem;
				margin-bottom: 0.8rem;
			}
			p{
				width: 92%;
				height: 0.88rem;
				line-height: 0.88rem;
				border: 1px solid #2E4289;
				border-radius: 0.2rem;
				font-size: 0.3rem;
				color: rgba(255,255,255,0.8);
				text-align: center;
				margin-bottom: 0.3rem;
			}
		}
		.container3{
			width: 100%;
			height: 13rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			.title{
				color: #333;
				font-size: 0.36rem;
				margin: 0.6rem 0 0.5rem 0;
			}
			.con{
				width: 92%;
				margin: 0 4%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.item{
					width: 3.45rem;
					height: 3.45rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 0.2rem;
					&.bg{
						background: #3C63AA; 
					}
					img{
						width: 100%;
						height: 100%;
					}
					span{
						font-size: 0.3rem;
						color: #fff;
						line-height: 0.5rem;
					}
				}
			}
		}
		.container4{
			width: 100%;
			overflow: hidden;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				color: #333;
				font-size: 0.36rem;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				padding: 0 6%;
				text-align: center;
				margin-bottom: 0.3rem;
			}
			img{
				width: 7.5rem;
				height: 3.4rem;
			}
		}
	}
</style>

